<template>
  <div id="app">
    <div id="nav">
      <!-- <nav-menu v-show="navShow=false"></nav-menu> -->
      <div v-show="navShow">
        <topnav style="width:1200px;margin:0 auto;"></topnav>
      </div>
      <div>
      <router-view/>
      </div>
    </div>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

<script>
// import navMenu from './components/navMenu.vue'
import topnav from './components/topnav.vue'
export default {
  name: 'App',
  provide () { // 父组件中通过provide来提供变量，在子组件中通过inject来注入变量
    return {
      reload: this.reload
    }
  },
  components: {
    // navMenu
    topnav
  },
  data () {
    return {
      navShow: true // 控制视图是否显示的变量
    }
  },
  watch: {
    $route (to, from) {
      if (to.path === '/register/uregister' || to.path === '/register/mregister' ||
        to.path === '/login/ulogin' || to.path === '/login/mlogin' || to.path === '/login/slogin' || to.path === '/sindex') {
        this.navShow = false
      } else {
        this.navShow = true
      }
    }
  },
  methods: {
    reload () {
      this.navShow = false // 先关闭再打开
      this.$nextTick(function () {
        this.navShow = true // 再打开
      })
    }
  }

}
</script>
